<template>
  <a-drawer :width="450" v-model:visible="showvisible" @cancel="cancel" unmountOnClose>
    <template #title>
      <a-space>
        <div>{{ typeMap[props.info.type] }}</div>
        <div>{{ props.info.code }}</div>
        <div class="status ml10">{{ tabKeyMap[props.info.status] }}</div>
      </a-space>
    </template>

    <div class="msg-list-con">
      <div class="top">
        <div>
          <a-space>
            <div>甲方：{{ props.info.companyShortName ? props.info.companyShortName : '--' }}</div>
            <div>乙方：{{ $extract(props.info, 'takeCompany.companyShortName') ? $extract(props.info, 'takeCompany.companyShortName') : '--' }}</div>
          </a-space>
        </div>
        <div style="margin-top: 3px">
          <a-space>
            <div>期望交付日期：</div>
            <div>{{ $setTime(props.info.gmtExpectDelivery, 'YYYY/MM/DD') }}</div>
            <div v-if="props.info.gmtExpectDelivery">
              <div style="color: red" v-if="!toCheckDay(props.info.gmtExpectDelivery).type">超时{{ toCheckDay(props.info.gmtExpectDelivery).day }}</div>
              <div class="highlight" v-else>剩余{{ toCheckDay(props.info.gmtExpectDelivery).day }}</div>
            </div>
            <div>
              <div class="level-btn level-1" v-if="props.info.priority === 'URGENT'"> 急 </div>
              <div class="level-btn level-2" v-else-if="props.info.priority === 'HIGH'"> 高 </div>
              <div class="level-btn level-3" v-else-if="props.info.priority === 'MIDDLE'"> 中 </div>
              <div class="level-btn level-4" v-else> 低 </div>
            </div>
          </a-space>
        </div>
      </div>
      <a-scrollbar style="height: calc(100vh - 220px); overflow: auto">
        <div>
          <div v-if="msgList.length > 0" v-for="item in msgList" :key="item.id" class="msg-item mb10">
            <div class="item-hd">
              <a-space>
                <div class="head-portrait">{{ item.createUname.slice(0, 1) }}</div>
                <div class="com-type">{{ item.belong }}</div>
                <div class="name">{{ item.createUname }}</div>
                <div class="time">{{ $setTime(item.gmtCreate) }}</div>
              </a-space>
            </div>
            <div class="item-bd"> {{ item.leaveMsg }} </div>
          </div>
          <a-empty v-else description="暂无留言信息" />
        </div>
      </a-scrollbar>
    </div>

    <template #footer class="modal-footer">
      <div class="fl" style="margin-bottom: 5px; width: 350px">
        <a-input v-model="remark" @press-enter="submit" placeholder="请输入" />
      </div>
      <a-button class="fl" type="primary" :loading="loading" @click="submit">确定</a-button>
    </template>
  </a-drawer>
</template>

<script lang="ts" setup>
  import { defineComponent, ref, computed, onMounted } from 'vue'
  import { listTaskLeaveMsgs, createTaskLeaveMsg } from '@/api/task'
  import { Message } from '@arco-design/web-vue'
  let props = defineProps(['modelValue', 'type', 'info'])
  let emits = defineEmits(['save', 'update:modelValue'])
  let showvisible = computed({
    get() {
      return props.modelValue
    },
    set(val) {
      emits('update:modelValue', val)
    },
  })
  const typeMap = {
    NEW_PRODUCT_PICTURE: '新品套图',
    QUICK_FIX_PICTURE: '快速修图',
    ORIGINAL_PICTURE: '原图',
    SHOOT_VIDEO: '拍摄视频',
  }
  const tabKeyMap = {
    WAIT_PUBLISH: '待发布',
    WAIT_ACCEPT: '待接单',
    SENDING_SAMPLE: '送样中',
    WAIT_SCHEDULE: '待排期',
    EXECUTING: '执行中',
    WAIT_VERIFY: '待验收',
    FINISHED: '已完成',
    NEGOTIATE_TERMINATED: '协商终止',
    TERMINATED: '已终止',
  }
  let loading = ref(false)
  let remark = ref()
  let msgList: any = ref([])
  const toCheckDay = (time: any) => {
    let date = new Date(time).valueOf() + 24 * 60 * 60 * 1000
    let newDate = new Date().valueOf()
    let timeStr = 0
    if (date > newDate) {
      timeStr = date - newDate
    } else {
      timeStr = newDate - date
    }
    const formatTimeFromTimestamp = (timestamp: number) => {
      let text = ''
      const days = Math.floor(timestamp / (60 * 60 * 24 * 1000))
      const hours = Math.floor((timestamp % (60 * 60 * 24 * 1000)) / (60 * 60 * 1000))
      text = days > 0 ? `${days}天${hours}小时` : `${Math.abs(hours)}小时`
      return text
    }
    if (date - newDate < 0) {
      return {
        type: false,
        day: formatTimeFromTimestamp(timeStr),
      }
    } else {
      return {
        type: true,
        day: formatTimeFromTimestamp(timeStr),
      }
    }
  }

  const getList = async () => {
    const res: any = await listTaskLeaveMsgs({ id: props.info.id })
    if (res) {
      msgList.value = res?.data || []
    }
  }

  const submit = async () => {
    let params = {
      leaveMsg: remark.value,
      taskId: props.info.id,
    }
    const res: any = await createTaskLeaveMsg(params)
    if (res) {
      remark.value = ''
      Message.success('留言成功')
      getList()
    }
  }

  const cancel = () => {
    showvisible.value = false
    emits('save')
  }

  onMounted(() => {
    getList()
  })
</script>

<style lang="less" scoped>
  .status {
    width: 50px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    color: white;
    background-color: #165dff;
    border-radius: 150px;
    font-size: 12px;
  }
  .msg-list-con {
    height: 100%;

    .top {
      height: 45px;
      font-size: 12px;
      .level-btn {
        width: 20px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        font-size: 12px;
      }

      .level-1 {
        background-color: #ffff80;
        color: black;
      }
      .level-2 {
        background-color: #a30014;
        color: white;
      }
      .level-3 {
        background-color: #d9001b;
        color: white;
      }
      .level-4 {
        background-color: #ec808d;
        color: white;
      }
    }

    .bottom {
      height: calc(100% - 45px);
      border: 1px solid red;
    }
  }

  .msg-item {
    width: 100%;
    .item-hd {
      font-size: 12px;
      .head-portrait {
        width: 20px;
        height: 20px;
        text-align: center;
        line-height: 20px;
        color: black;
        background-color: #d3d3d4;
        border-radius: 50%;
      }
      .com-type {
        padding: 1px 3px;
        background-color: #165dff;
        color: white;
      }
      .time {
        color: #7f7f7f;
      }
    }
    .item-bd {
      margin-top: 5px;
      font-size: 12px;
      color: #7f7f7f;
    }
  }
</style>
